<template>
  <div class="index">
    <audio :src="`${$publicPath}audio/wanxing.mp3`"
           autoplay
           id="audio"
           loop></audio>
    <div class="animate-box">
      <div class="animate-name"
           v-html="filter('HI ~~ ' + name)"></div>
    </div>
    <div v-for="(i,index) in 150"
         :class="'star star-' + i"
         :key="index"></div>
    <div class="star-div"
         v-html="shootingHtml"></div>
    <div class="round">
      <img src="../../../public/img/index/xingqiu.png"
           alt="">
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapGetters } from "vuex";
import "@/assets/style/animate.css";
const Velocity: any = require("~/static/js/velocity.min.js");
@Component({
  computed: {
    ...mapGetters(["name", "avatar", "content"])
  },
  watch: {
    i: {
      handler(val) {
        if (val === 9) {
          (this as any).loop();
        }
      }
    }
  }
})
export default class Index extends Vue {
  document: any;
  num: number = 20;
  audio: any;
  shootingHtml: any = "";
  time: number = 1;
  ele: Array<any> = [];
  i: number = 0;
  timeOutArr: Array<any> = [];
  animateArr: Array<string> = [
    "bounce",
    "flash",
    "pulse",
    "rubberBand",
    "shake",
    "headShake",
    "swing",
    "tada",
    "wobble",
    "jello",
    "bounceIn",
    "bounceInDown",
    "bounceInLeft",
    "bounceInRight",
    "bounceInUp",
    "fadeIn",
    "fadeInDown",
    "fadeInDownBig",
    "fadeInLeft",
    "fadeInLeftBig",
    "fadeInRight",
    "fadeInRightBig",
    "fadeInUp",
    "fadeInUpBig",
    "flip",
    "flipInX",
    "flipInY",
    "rotateIn",
    "rotateInDownLeft",
    "rotateInDownRight",
    "rotateInUpLeft",
    "rotateInUpRight",
    "slideInDown",
    "slideInLeft",
    "slideInRight",
    "slideInUp",
    "zoomIn",
    "zoomInDown",
    "zoomInLeft",
    "zoomInRight",
    "zoomInUp",
    "hinge",
    "rollIn",
    "lightSpeedIn"
  ];
  activated() {
    this.audio = document.getElementById("audio");
    this.audio.load();
    this.audio.play();
    this.createStar();
    this.setTimeoutFuntion(500, () => {
      for (const iterator of document.getElementsByClassName("my-text")) {
        if ((iterator as any).innerText !== "") {
          this.ele.push(iterator);
        }
      }
      this.animateStart();
      this.loop();
    });
  }
  deactivated() {
    for (const iterator of this.timeOutArr) {
      clearTimeout(iterator);
    }
  }
  loop(): void {
    this.setTimeoutFuntion(3000, () => {
      for (const ele of this.ele) {
        ele.classList = "my-text animated";
        const index = Math.floor(Math.random() * 43);
        ele.classList.add(this.animateArr[index]);
      }
      this.loop();
    });
  }
  animateStart(): void {
    this.setTimeoutFuntion(500, () => {
      if (this.i > this.ele.length - 1) {
        return;
      }
      Velocity(this.ele[this.i], { opacity: 1 }, 400, () => {
        const index = Math.floor(Math.random() * 43);
        this.ele[this.i - 1].classList.add(this.animateArr[index]);
      });
      this.i++;
      this.animateStart();
    });
  }
  filter(html: string): string {
    let template = "";
    let i = 0;
    for (const iterator of html.split("")) {
      i++;
      template += `
            <div class="my-text text-${i} animated">${iterator}</div>
          `;
    }
    return template;
  }
  createStar(): void {
    this.setTimeoutFuntion((this.time + 1) * 1000, () => {
      this.time = Math.round(Math.random() * 3) + 1;
      this.shootingHtml = `
          <div class="shooting-star" ref="star" style="
          top:${Math.random() * 100}%;
          left:${Math.random() * 100}%;
          animation:tail ${this.time}s ease-in-out;
          
          "><div>
        `;
      this.createStar();
    });
  }
  setTimeoutFuntion(time: number, fun: Function) {
    this.timeOutArr.push(
      setTimeout(() => {
        fun();
      }, time)
    );
  }
}
</script>
<style lang="scss" >
.index {
  height: 100%;
  width: 100%;
  padding: 0.35rem 0.35rem;
  background-color: rgba(5, 8, 50, 0.787);
  position: relative;
  overflow: hidden;
  .animate-box {
    width: 100%;
    height: 200px;
    position: relative;
    .animate-name {
      white-space: nowrap;
      position: absolute;
      left: 50%;
      top: 50%;

      transform: translateX(-50%) translateY(-50%);
      font-size: 0.6rem;
      transition: all ease-in-out 0.3s;
    }
  }
  .my-text {
    display: inline-flex;
    opacity: 0;
    background-image: url("../../../public/img/index/text.jpg");
    background-origin: border-box;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    text-shadow: 0px 0px 5px #d9e871de;
  }
  .star {
    position: absolute;
    border-radius: 50%;
    background: #5f91ff;
    box-shadow: 0 0 2px 2px rgba(87, 92, 162, 0.787);
    top: 0;
    left: 0;
  }
  .star-div {
    transform: rotate(135deg);
    height: 100%;
    position: relative;
    top: -40%;
    .shooting-star {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 2px;
      background: linear-gradient(-45deg, #fff, rgba(0, 0, 255, 0));
      border-radius: 999px;
      filter: drop-shadow(0 0 6px #fff);
    }
    @keyframes tail {
      0% {
        width: 0;
      }
      100% {
        width: 1000px;
        opacity: 0;
      }
    }
  }

  .round {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    animation: 5s deg infinite linear;
    opacity: 0.7;
    img {
      width: 100%;
    }
  }

  @keyframes deg {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  @for $i from 1 through 150 {
    $size: random() * 5px;
    .star-#{$i} {
      width: $size;
      height: $size;
      transform: translateX(random() * 1000 + px)
        translateY(random() * 1000 + px);
      animation: round(random() * 10) + 1s identifier infinite;
    }
  }
  @keyframes identifier {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
  }
}
</style>
